<template>
  <div class="desktop">
    <div
      v-for="(icon, index) in icons"
      :key="icon.id"
      class="icon"
      :class="{ merged: icon.merged }"
      draggable="true"
      @dragstart="dragStart(index)"
      @dragover.prevent
      @drop="dragDrop(index)"
      @dblclick="deleteIcon(index)"
    >
      {{ icon.label }}
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      icons: [
        { id: 1, label: 'App 1', merged: false },
        { id: 2, label: 'App 2', merged: false },
        // ... 更多图标
      ],
      draggedIndex: null
    });

    const dragStart = (index) => {
      state.draggedIndex = index;
    };

    const dragDrop = (targetIndex) => {
      const sourceIcon = state.icons[state.draggedIndex];
      const targetIcon = state.icons[targetIndex];

      if (sourceIcon !== targetIcon) {
        // 合并图标逻辑，可以是创建一个新的文件夹图标或更新状态
        sourceIcon.merged = targetIcon.merged = true;

        // 例如，创建一个表示文件夹的新图标
        state.icons.push({
          id: Math.max(...state.icons.map(icon => icon.id)) + 1,
          label: `${sourceIcon.label} & ${targetIcon.label}`,
          merged: true
        });
      }

      state.draggedIndex = null;
    };

    const deleteIcon = (index) => {
      if (state.icons[index].merged) {
        // 解除合并或删除图标
        state.icons = state.icons.filter((_, i) => i !== index);
      }
    };

    return {
      ...toRefs(state),
      dragStart,
      dragDrop,
      deleteIcon
    };
  },
};
</script>

<style scoped>
.desktop {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.icon {
  width: 80px;
  height: 80px;
  margin: 8px;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

.icon.merged {
  background-color: #add8e6;
}
</style>
